<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

    <style>
        .var {
            --navbarBg: lightgray;
            --navbarHeigth: 5rem;
            --itemBg: black;
            --itemHoverBg: black;
            --logoRightSpace: 6rem;
            --navItemSpace: 1rem;
            --navItemTopSpace: 0rem;
            --fontSize: 16px;
        }

        .navbar-my {
            background-color: #eee;
        }

        .navbar-my .navbar-nav {
            height: var(--navbarHeigth);
        }

        .navbar>.container .navbar-brand {
            margin-right: var(--logoRightSpace);
        }

        .navbar-my .navbar-nav>li {
            margin-right: var(--navItemSpace);
            margin-top: var(--navItemTopSpace);
        }

        .navbar-my .navbar-nav>li>a {
            color: var(--itemBg);
            font-size: var(--fontSize);
        }

        .navbar-my .navbar-nav>li>a:hover,
        .navbar-my .navbar-nav>li>a:focus {
            color: var(--itemHoverBg);
            background-color: var(--navbarBg);
        }
    </style>

</head>

<body>
    <div class="navbar navbar-my navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img :src="myItem.propValues[logoIndex].value" alt=""
                        :style="{'height': myItem.propValues[logoSizeIndex].value + 'px'}" />
                </a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li v-for="(item, i) in myItem.propValues[dataIndex].value.data" :key="i"><a :href="item.url"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</body>

</html>